<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div style="line-height: 0">
      <el-row :gutter="10">
        <el-col :span="24">
          <span>用户预约信息：</span>
          <el-select
              v-model="filters.value1"
              placeholder="请选择区域类型"
              size="mini"
              @change="getareaType($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="filters.value1"
              placeholder="请选择区域状态"
              size="mini"
              @change="getareaType($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </el-col>
      </el-row>
      <el-table
        class="tableBorder"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '20px' }"
        :data="tableData"
        style="width: 100%; margin-top: 30px"
        :stripe="true"
        :border="true"
        :highlight-current-row="true"
        size="mini"
      >
      <el-table-column prop="areaPosition" label="区域位置">
          <template slot-scope="scope">
            {{ scope.row.areaPosition }}- {{ scope.row.areaFloor }}层
            {{ scope.row.areaDetail }}号
          </template>
        </el-table-column>
        <el-table-column prop="areaType" label="区域类型">
          <template slot-scope="scope">
            <span v-if="scope.row.areaType === '1'" style="color: #37b328"
                ><el-tag type="success">教室</el-tag></span
              >
            <span v-if="scope.row.areaType === '2'" style="color: #37b328"
                ><el-tag type="success" effect="light">篮球场</el-tag></span
              >
              <span v-if="scope.row.areaType === '3'" style="color: #37b328"
                ><el-tag type="success">乒乓球场</el-tag></span
              >
              <span v-if="scope.row.areaType === '4'" style="color: #37b328"
                ><el-tag type="success">羽毛球/网球场</el-tag></span
              >
              <span v-if="scope.row.areaType === '5'" style="color: #37b328"
                ><el-tag type="success">足球场</el-tag></span
              >
              <span v-if="scope.row.areaType === '6'" style="color: #37b328"
                ><el-tag type="success">排球场</el-tag></span
              >
          </template>
        </el-table-column>
        <el-table-column prop="holdPeople" label="容纳人数"></el-table-column>
        <el-table-column prop="areaState" label="区域状态">
          <template slot-scope="scope">
            <span v-if="scope.row.areaState === '1'" style="color: #37b328"
                ><el-tag type="success">空闲</el-tag></span
              >
              <span v-if="scope.row.areaState === '9'" style="color: #37b328"
                >
                <el-tag type="danger">删除</el-tag></span
              >
              <span v-if="scope.row.areaState === '4'" style="color: #37b328"
                ><el-tag type="danger">不开放</el-tag></span
              >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      area: {
        id: 2,
        areaType: "",
        areaPosition: "",
        areaFloor: 1,
        areaDetail: "",
        holdPeople: 100,
        areaState: "",
      },
      pageBean: {
        currPage: 1,
        pageSize: 5,
        totalPages: 0,
        totalNum: 0,
      },
      options: [
      {
          value: "1",
          label: "教室",
        },
        {
          value: "2",
          label: "篮球场",
        },
        {
          value: "3",
          label: "乒乓球场",
        },
        {
          value: "4",
          label: "羽毛球/网球场",
        },
        {
          value: "5",
          label: "足球场",
        },
        {
          value: "6",
          label: "排球场",
        },
      ],
      options1: [
      {
          value: "1",
          label: "教室",
        },
        {
          value: "2",
          label: "篮球场",
        },
        {
          value: "3",
          label: "乒乓球场",
        }
      ],
      tableData: [],
      filters: {
        value1: '',
        value2: ''
      },
    };
  },
  created() {
    this.areaList();
  },
  methods: {
    areaList() {
      this.$axios.post("api/lot/area/getAll").then((r) => {
        console.log(r.data.data);
        this.tableData = r.data.data;
      });
    },
    //
    getareaType(e){
      console.log(e);
    }
  },
};
</script>